<template>
  <div class="test-list-view">
    <!--    未开放提示-->
    <div style="font-size: 18px;color: #3573e5;text-align: center;transform: translateY(100px)">单元测试暂未开放,看完视频即完成</div>

    <div class="list-item" v-for="(tests,index) in list" :key="tests.id">
      <div class="chapter-title">第{{ index + 1 }}章</div>
      <div class="chapter-tests">
        <div class="test" v-for="test in tests" :key="test.id">
          <div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center">
            <div style="width: 90%">
              <div class="test-head">
                <span class="title">{{ test.title }}</span>
                <span class="deadline">提交截止时间 {{ test.gmtEnd | gmtToDate }}</span>
              </div>
              <div class="test-description">测试描述：{{ test.description }}</div>
              <!--          <div class="test-score">-->
              <!--            有效分数：-->
              <!--          </div>-->
              <div class="test-submit">
                <template v-if="test.records.length > 0">
                  <div>有效提交：</div>
                  <table>
                    <thead>
                    <tr>
                      <th class="count">次数</th>
                      <th class="time">提交时间</th>
                      <th class="score">得分</th>
                      <th class="op">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(submit, i) in test.records" :key="submit.id">
                      <td>{{ i + 1 }}</td>
                      <td>{{ submit.time }}</td>
                      <td class="score">{{ submit.score }}/{{ test.score }}</td>
                      <td class="operation" @click="gotoTestRecord(submit.id)">查看</td>
                    </tr>
                    </tbody>
                  </table>
                </template>
                <template v-else>
                  <div>暂无提交</div>
                </template>
              </div>
            </div>
            <div>
              <button @click="gotoTest(test.id)" style="padding: 5px">前往测试</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestListView",
  filters: {
    gmtToDate(gmt) {
      let fmt = "YYYY-mm-dd HH:MM";
      let date = new Date(parseInt(gmt));
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(), // 年
        "m+": (date.getMonth() + 1).toString(), // 月
        "d+": date.getDate().toString(), // 日
        "H+": date.getHours().toString(), // 时
        "M+": date.getMinutes().toString(), // 分
        "S+": date.getSeconds().toString(), // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
          );
        }
      }
      return fmt;
    }
  },
  data() {
    return {
      loading: false,
      list: []
    };
  },
  mounted() {
    this.getTest()
  },
  methods: {
    getTest() {
      this.loading = true;
      this.$api.queryCourseExams({
        courseId: this.$route.params.courseId
      }).then((res) => {
        console.log("res", res.data.data)
        this.list = res.data.data;
        this.loading = false;
      });
    },
    gotoTest(examId) {
      this.$router.push({
        name: "learn-test-detail",
        params: {
          examId: examId,
        },
      });
    },
    gotoTestRecord(examRecordId) {
      this.$router.push({
        name: "learn-test-record",
        params: {
          examRecordId: examRecordId,
        },
      });
    },
  },
  computed: {},
};
</script>

<style scoped lang="scss">
.list-item {
  padding: 20px;
}

.chapter-title {
  margin-bottom: 20px;
  font-size: 18px;
}

.test {
  padding: 10px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  background: #f6f6f6;
  font-size: 14px;
  color: #888;

  > div {
    margin-bottom: 10px;
  }

  .title {
    font-size: 18px;
    color: black;
    margin-right: 10px;
  }
}

.test-submit {
  table {
    text-align: left;
    width: 100%;
  }

  th.count {
    width: 60px;
  }

  td.score {
    color: #357ff8;
    font-weight: bolder;
  }

  td.operation {
    cursor: pointer;
  }
}
</style>
